<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath %>">
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel='stylesheet' href="static/lib/layui/css/layui.css">
</head>
<body>
<div style="width:100px" class="layui-input-block layui-input-inline">
		<select id='selecttext'>
			<option value="">请选择</option>
			<option value="u_id">ID</option>
			<option value="username">用户名</option>
			<option value="name">姓名</option>
			<option value="id_number">身份证</option>
			<option value="sex">性别</option>
			<option value="u_state">状态</option>
			<option value="email">邮箱</option>
			<option value="phone">手机</option>
			<option value="role">角色</option>
			<option value="u_integral">积分</option>
		</select>
	</div>
<input type="text" id='checktext' style="width:200px;height:28px">
<table class="layui-table" lay-data="{toolbar:'#toolbar', url:'user/list', page:true, id:'datalist'}" lay-filter="datalist">
  <thead>
    <tr>
      <th lay-data="{type:'checkbox'}"></th>
      <th lay-data="{field:'u_id', width:60, sort: true}">ID</th>
      <th lay-data="{field:'username'}">用户名</th>
      <th lay-data="{field:'password' ,sort: true}">密码</th>
      <th lay-data="{field:'name'}">姓名</th>
      <th lay-data="{field:'id_number'}">身份证</th>
      <th lay-data="{field:'sex',width:60}">性别</th>
      <th lay-data="{field:'birth', sort: true}">出生日期</th>
      <th lay-data="{field:'u_state',width:60}">状态</th>
      <th lay-data="{field:'email'}">邮箱</th>
      <th lay-data="{field:'phone'}">手机</th>
      <th lay-data="{field:'role',width:90,sort: true}">角色</th>
      <th lay-data="{field:'regtime',sort: true}">注册时间</th>
      <th lay-data="{field:'u_integral',width:80, sort: true}">积分</th>
      <th lay-data="{toolbar: '#barOption'}" id="operation"></th>
    </tr>
  </thead>
</table>
<!-- 新增弹出层显示内容 -->
<div class="addwin" style="display:none">
	<form class="layui-form" lay-filter="addform">
		 <div class="layui-form-item">
		    <label class="layui-form-label">账&nbsp;&nbsp;&nbsp;号</label>
		    <div class="layui-input-inline">
		      <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
		    </div>
		 </div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">密&nbsp;&nbsp;&nbsp;码</label>
		    <div class="layui-input-inline">
		      <input type="password" name="password"  placeholder="请输入密码" autocomplete="off" class="layui-input">
		    </div>
		 </div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">姓&nbsp;&nbsp;&nbsp;名</label>
		    <div class="layui-input-inline">
		      <input type="text" name="name"  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
		    </div>
		    <div class="layui-form-mid layui-word-aux">必填</div>
		 </div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">身&nbsp;份&nbsp;证</label>
		    <div class="layui-input-inline">
		      <input type="text" name="id_number"  lay-verify="required" placeholder="请输入身份证" autocomplete="off" class="layui-input">
		    </div>
		    <div class="layui-form-mid layui-word-aux">必填</div>
		 </div>
		 <div class="layui-form-item" pane="">
    		<label class="layui-form-label">性&nbsp;&nbsp;&nbsp;别</label>
    			<div class="layui-input-block">
      				<input type="radio" name="sex" value="男" title="男"><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>男</div></div>
      				<input type="radio" name="sex" value="女" title="女" checked=""><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>女</div></div>
    			</div>
  		</div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">生&nbsp;&nbsp;&nbsp;日</label>
		    <div class="layui-input-inline">
		      <input type="date" name="birth"  placeholder="请输入生日" autocomplete="off" class="layui-input">
		    </div>
		 </div>
		 <div class="layui-form-item" pane="">
    		<label class="layui-form-label">状&nbsp;&nbsp;&nbsp;态</label>
    			<div class="layui-input-block">
      				<input type="radio" name="u_state" value="正常" title="正常" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>正常</div></div>
      				<input type="radio" name="u_state" value="受限" title="受限" ><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>受限</div></div>
    			</div>
  		</div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">邮&nbsp;&nbsp;&nbsp;箱</label>
		    <div class="layui-input-inline">
		      <input type="email" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input" >
		    </div>
		 </div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">电&nbsp;&nbsp;&nbsp;话</label>
		    <div class="layui-input-inline">
		      <input type="tel" name="phone"  lay-verify="phone" placeholder="请输入电话" autocomplete="off" class="layui-input">
		    </div>
		 </div>
		 <div class="layui-form-item">
    		<label class="layui-form-label">角&nbsp;&nbsp;&nbsp;色</label>
    		<div class="layui-input-block" style="width:190px">
      		<select name="role" lay-verify="required">
        	<option value=""></option>
        	<option value="普通用户">普通用户</option>
        	<option value="维修人员">维修人员</option>
        	<option value="酒店员工">酒店员工</option>
        	<option value="酒店经理">酒店经理</option>
      		</select>
    		</div>
    	</div>
    	<div class="layui-form-item">
		    <label class="layui-form-label">注册日期</label>
		    <div class="layui-input-inline">
		      <input type="date" name="regtime"  placeholder="请输入注册时的日期" autocomplete="off" class="layui-input">
		    </div>
		 </div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">积&nbsp;&nbsp;&nbsp;分</label>
		    <div class="layui-input-inline">
		      <input type="text" name="u_integral"  placeholder="请输入初始积分"  autocomplete="off" class="layui-input">
		    </div>
		 </div>
	</form>
</div>

<div class="updwin" style="display:none">
	<form class="layui-form" lay-filter="updform">
	
		<div class="layui-form-item">
		    <label class="layui-form-label">I&nbsp;&nbsp;&nbsp;D</label>
		    <div class="layui-input-inline">
		      <input type="text" id="u_id" name="u_id" placeholder="u_id" autocomplete="off" class="layui-input" disabled>
		    </div>
		 </div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">账&nbsp;&nbsp;&nbsp;号</label>
		    <div class="layui-input-inline">
		      <input type="text" id="username" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
		    </div>
		 </div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">密&nbsp;&nbsp;&nbsp;码</label>
		    <div class="layui-input-inline">
		      <input type="password" id="password" name="password"  placeholder="请输入密码" autocomplete="off" class="layui-input">
		    </div>
		 </div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">姓&nbsp;&nbsp;&nbsp;名</label>
		    <div class="layui-input-inline">
		      <input type="text" id="name" name="name"  placeholder="请输入姓名" autocomplete="off" class="layui-input">
		    </div>
		    <div class="layui-form-mid layui-word-aux">必填</div>
		 </div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">身&nbsp;份&nbsp;证</label>
		    <div class="layui-input-inline">
		      <input type="text" id="id_number" name="id_number"  placeholder="请输入身份证" autocomplete="off" class="layui-input">
		    </div>
		    <div class="layui-form-mid layui-word-aux">必填</div>
		 </div>
		 <div class="layui-form-item" pane="">
    		<label class="layui-form-label">性&nbsp;&nbsp;&nbsp;别</label>
    			<div class="layui-input-block">
      				<input type="radio" name="sex" value="男" title="男"><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>男</div></div>
      				<input type="radio" name="sex" value="女" title="女" checked=""><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>女</div></div>
    			</div>
  		</div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">生&nbsp;&nbsp;&nbsp;日</label>
		    <div class="layui-input-inline">
		      <input type="date" id="birth" name="birth"  placeholder="请输入生日" autocomplete="off" class="layui-input">
		    </div>
		 </div>
		 <div class="layui-form-item" pane="">
    		<label class="layui-form-label">状&nbsp;&nbsp;&nbsp;态</label>
    			<div class="layui-input-block">
      				<input type="radio" name="u_state" value="正常" title="正常" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>正常</div></div>
      				<input type="radio" name="u_state" value="受限" title="受限" ><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>受限</div></div>
    			</div>
  		</div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">邮&nbsp;&nbsp;&nbsp;箱</label>
		    <div class="layui-input-inline">
		      <input type="email" id="email" name="email"  placeholder="请输入邮箱" autocomplete="off" class="layui-input">
		    </div>
		 </div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">电话</label>
		    <div class="layui-input-inline">
		      <input type="tel" id="phone" name="phone"  placeholder="请输入电话" autocomplete="off" class="layui-input">
		    </div>
		 </div>
		 <div class="layui-form-item">
    		<label class="layui-form-label">角色</label>
    		<div class="layui-input-block" style="width:190px">
      		<select name="role" lay-verify="required">
        	<option value=""></option>
        	<option value="普通用户">普通用户</option>
        	<option value="维修人员">维修人员</option>
        	<option value="酒店员工">酒店员工</option>
        	<option value="酒店经理">酒店经理</option>
      		</select>
      		</div>
    	</div>
    	<div class="layui-form-item">
		    <label class="layui-form-label">注册日期</label>
		    <div class="layui-input-inline">
		      <input type="date" id="regtime" name="regtime"  placeholder="请输入注册时的日期" autocomplete="off" class="layui-input">
		    </div>
		 </div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">积&nbsp;&nbsp;&nbsp;分</label>
		    <div class="layui-input-inline">
		      <input type="text" id="u_integral" name="u_integral"  placeholder="请输入初始积分"  autocomplete="off" class="layui-input">
		    </div>
		 </div>
	</form>
</div>

<div class="delwin" style="display:none">
	<form class="layui-form" lay-filter="delform">
		<div class="layui-form-item">
		    <label class="layui-form-label">I&nbsp;&nbsp;&nbsp;D</label>
		    <div class="layui-input-inline">
		      <input type="text" name="u_id" placeholder="u_id" autocomplete="off" class="layui-input" disabled>
		    </div>
		 </div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">账&nbsp;&nbsp;&nbsp;号</label>
		    <div class="layui-input-inline">
		      <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
		    </div>
		 </div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">密&nbsp;&nbsp;&nbsp;码</label>
		    <div class="layui-input-inline">
		      <input type="password" name="password"  placeholder="请输入密码" autocomplete="off" class="layui-input">
		    </div>
		 </div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">姓&nbsp;&nbsp;&nbsp;名</label>
		    <div class="layui-input-inline">
		      <input type="text" name="name"  placeholder="请输入姓名" autocomplete="off" class="layui-input">
		    </div>
		    <div class="layui-form-mid layui-word-aux">必填</div>
		 </div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">身&nbsp;份&nbsp;证</label>
		    <div class="layui-input-inline">
		      <input type="text" name="id_number"  placeholder="请输入身份证" autocomplete="off" class="layui-input">
		    </div>
		    <div class="layui-form-mid layui-word-aux">必填</div>
		 </div>
		 <div class="layui-form-item" pane="">
    		<label class="layui-form-label">性&nbsp;&nbsp;&nbsp;别</label>
    			<div class="layui-input-block">
      				<input type="radio" name="sex" value="男" title="男"><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>男</div></div>
      				<input type="radio" name="sex" value="女" title="女" checked=""><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>女</div></div>
    			</div>
  		</div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">生&nbsp;&nbsp;&nbsp;日</label>
		    <div class="layui-input-inline">
		      <input type="date" name="birth"  placeholder="请输入生日" autocomplete="off" class="layui-input">
		    </div>
		 </div>
		 <div class="layui-form-item" pane="">
    		<label class="layui-form-label">状&nbsp;&nbsp;&nbsp;态</label>
    			<div class="layui-input-block">
      				<input type="radio" name="u_state" value="正常" title="正常" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>正常</div></div>
      				<input type="radio" name="u_state" value="受限" title="受限" ><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>受限</div></div>
    			</div>
  		</div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">邮&nbsp;&nbsp;&nbsp;箱</label>
		    <div class="layui-input-inline">
		      <input type="email" name="email"  placeholder="请输入邮箱" autocomplete="off" class="layui-input">
		    </div>
		 </div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">电&nbsp;&nbsp;&nbsp;话</label>
		    <div class="layui-input-inline">
		      <input type="tel" name="phone"  placeholder="请输入电话" autocomplete="off" class="layui-input">
		    </div>
		 </div>
		 <div class="layui-form-item">
    		<label class="layui-form-label">角&nbsp;&nbsp;&nbsp;色</label>
    		<div class="layui-input-block" style="width:190px">
      		<select name="role" lay-verify="required">
        	<option value=""></option>
        	<option value="普通用户">普通用户</option>
        	<option value="维修人员">维修人员</option>
        	<option value="酒店员工">酒店员工</option>
        	<option value="酒店经理">酒店经理</option>
      		</select>
      		</div>
    	</div>
    	<div class="layui-form-item">
		    <label class="layui-form-label">注册日期</label>
		    <div class="layui-input-inline">
		      <input type="date" name="regtime"  placeholder="请输入注册时的日期" autocomplete="off" class="layui-input">
		    </div>
		 </div>
		 <div class="layui-form-item">
		    <label class="layui-form-label">积&nbsp;&nbsp;&nbsp;分</label>
		    <div class="layui-input-inline">
		      <input type="text" name="u_integral"  placeholder="请输入初始积分"  autocomplete="off" class="layui-input">
		    </div>
		 </div>
	</form>
</div>
<!--行内工具栏  -->
<script type="text/html" id="barOption">
<div class="layui-btn-group">
	<button type="button" class="layui-btn layui-btn-sm layui-bg-green "  lay-event="updateevent">编辑</button>
	<button type="button" class="layui-btn layui-btn-sm layui-bg-red"  lay-event="deleteevent">删除</button>
</div>
</script>
<!-- 头部工具栏 -->
<script type="text/html" id="toolbar">
<div class="layui-btn-group">
  <button type="button" class="layui-btn" lay-event="addevent">增加</button>
  <button type="button" class="layui-btn layui-bg-red" lay-event="delevent">删除</button>
  <button type="button" class="layui-btn" lay-event="checkevent">查找</button>
</div>
</script>

<script type="text/javascript" src="static/lib/layui/layui.js"></script>
<script type="text/javascript" id="toolbar">
	layui.use(['table','form'],function(){
        var table = layui.table;
		var form = layui.form;
		$ = layui.jquery;
		//监听工具条事件，删除表格中的一行数据
		table.on('tool(datalist)',function(obj){
			var data = obj.data;//获取当前行的数据
			var layEvent = obj.event;//获取lay-event对应的值
			var tr = obj.tr;//获取当前行tr的DOM对象
			if(layEvent == 'deleteevent'){
				layer.confirm('确定要删除吗？',function(index){
					layer.closeAll('dialog');
					 $.ajax({
						url:'user/del',
						type:'post',
						data:{'u_id':data.u_id},//向服务器端发送要删除的id
						success:function(res){
							if(res!=0){
								layer.closeAll();
								//提示
								layer.msg("删除成功",{icon:1});
								//刷新表格
								table.reload("datalist");
							}
							else{
								layer.msg("删除失败",{icon:1});
							}
						},
						error:function(res){
							layer.msg("删除失败",{icon:2});
						}
					});
				});
			}else if(layEvent == 'updateevent'){
				//#对应的是ID,.对应的是class
				$("#u_id").val(data.u_id);//设置编辑框的修改前的属性
				$("#username").val(data.username);
				$("#password").val(data.password);
				$("#name").val(data.name);
				$("#id_number").val(data.id_number);//设置编辑框的修改前的属性
				$("#birth").val(data.birth);
				$("#email").val(data.email);
				$("#email").val(data.email);
				$("#phone").val(data.phone);
				$("#regtime").val(data.regtime);
				$("#u_integral").val(data.u_integral);
				layer.open({
					type:1,
					title:"新增",
					area:['400px','600px'],
					content:$(".updwin"),//绑定的窗口
					btn:["确认","取消"],
					btn1:function(){
						//点击确定提交数据
						//验证
						//表单数据
						
						var formdata=form.val("updform");
						$.ajax({
							type:'post',
							url:'user/upd',
							data:formdata,
							success:function(d){
								if(d!=0){//d表示后端传过来的数据，大于0就表示前台传送数据成功
									
									//关闭对话框
									layer.closeAll();
									//提示
									layer.msg("修改成功",{icon:1});
									//刷新表格
									table.reload("datalist");
								}
								else{
									layer.msg("修改失败",{icon:2});
								}
							},
							error:function(){
								layer.msg("修改失败",{icon:2});
							}
							
						});
					},
					btn2:function(){
						layer.msg("点击取消",{time:2000,icon:5});
						return false;//不关闭窗口
					}
				});
			}
		});
	})
</script>
<script type="text/javascript">
var $=layui.$;
var table=layui.table;
var layer=layui.layer;
var form=layui.form;

//头部工具栏
table.on("toolbar(datalist)",function(obj){
	var event=obj.event;
	var config = obj.config;
	var checkdata = table.checkStatus(config.id);
	if(event=="delevent"){
		//获取表格中选中的数据
		var data = checkdata.data;
		form.val("delform",data[0]);
		//console.log(data.lenth);
		if(data.lenth==0){
			layer.msg("请先选中数据",{time:2000,icon:5});
		}else{
			layer.open({
				type:1,
				title:"删除",
				area:['400px','600px'],
				content:$(".delwin"),//绑定的窗口
				btn:["确定","取消"],
				btn1:function(){
					//点击确定提交数据
					//用ajax提交
					//这里可以做验证
					var formdata = form.val("delform");
					$.ajax({
						type:'post',
						url:'user/del',
						data:formdata,
						//d就是Servlet返回的count
						success:function(d){
							if(d!=0){
								//关闭对话框
								layer.closeAll();
								//提示
								layer.msg("数据删除成功",{icon:1});
								//刷新
								table.reload("datalist");
							} else{
								layer.msg("数据删除失败",{icon:2});
							}
						},
						error:function(){
							layer.msg("数据删除失败",{icon:2});
						}
					})
				},
				btn2:function(){
					layer.closeAll();
				}
			});
		}
	}else if(event=="addevent"){
		layer.open({
			type:1,
			title:"增加",
			area:['400px','600px'],
			content:$(".addwin"),//绑定的窗口
			btn:["确定","取消"],
			btn1:function(){
				//点击确定提交数据
				//用ajax提交
				//这里可以做验证
				var formdata = form.val("addform");
				$.ajax({
					type:'post',
					url:'user/add',
					data:formdata,
					//d就是Servlet返回的count
					success:function(d){
						if(d!=0){
							//关闭对话框
							layer.closeAll();
							//提示
							layer.msg("数据保存成功",{icon:1});
							//刷新
							table.reload("datalist");
						} else{
							layer.msg("数据保存失败",{icon:2});
						}
					},
					error:function(){
						layer.msg("数据保存失败",{icon:2});
					}
				})
			},
			btn2:function(){
				//layer.msg("点击取消",{time:2000,icon:5});
				//return fasle;//不关闭窗口
				layer.closeAll();
			}
		});
		
		
	}else if(event=="checkevent"){
		//点击查询
		var text=$("#checktext").val();
		var select=$("#selecttext").val();
		if(text==null){
			table.reload("datalist");
		} else
		table.reload("datalist",{where:{'checktext':text,'selecttext':select},page:true});
	}
});
</script>
</body>
</html>